<template>
  <div class="order">
    <div>
      <van-search
        v-model="state.phone"
        class="search"
        shape="round"
        show-action
        placeholder="请输入手机号"
        @search="onSearch"
      >
        <template #action>
          <div class="c-red" @click="onSearch">搜索</div>
        </template>
      </van-search>
    </div>

    <div class="order-list">
      <template v-if="state.orderList && state.orderList.length">
        <orderItem
          v-for="(item, index) in state.orderList"
          :key="index"
          :orderData="item"
        />
      </template>
      <van-empty v-else class="empty" description="暂无订单记录" />
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import orderItem from "./components/orderItem.vue";
import { Toast } from "vant";
import { getOrderList } from "@/api/common";
import { getLocations, setLocations, setPhoneTokenMap } from '@/utils/storage'

export default defineComponent({
  name: "OrderList",
  components: {
    orderItem,
  },
  setup() {
    const orderHistoryPhone = getLocations('orderHistoryPhone');
    const router = useRouter();
    const route = useRoute();
    const state = reactive({
      phone: (route.query && route.query.phone) || orderHistoryPhone || "",
      orderList: [],
    });

    const onSearch = () => {
      if (!state.phone) {
        Toast.fail("请输入手机号！");
        return;
      }
      const phoneTokenMap = getLocations('phoneTokenMap') || {}
      if (phoneTokenMap[state.phone]) {
        const params = {
          phone: state.phone,
          phoneToken: phoneTokenMap[state.phone],
        };
        getOrderList(params).then((res) => {
          if (res.code == 200) {
            Toast.success("查询成功！");
            state.orderList = res.data || [];
            if (state.orderList) {
              state.orderList.forEach((item) => {
                item.totalPriceYuan = (item.totalPrice / 100).toFixed(2);
              });
            }
            setLocations('orderHistoryPhone', state.phone)
          } else {
            const phoneTokenMap = {
              [state.phone]: '',
            }
            setPhoneTokenMap(phoneTokenMap)
            router.push({
              path: "/order/login",
              query: { phone: state.phone },
            });
          }
        });
      } else {
        router.push({
          path: "/order/login",
          query: { phone: state.phone },
        });
      }
    };
    onSearch();
    watch(() => route.path, () => {
      if (route.query.phone) {
        state.phone = route.query.phone;
        onSearch();
      }
    })
    return {
      state,
      onSearch,
    };
  },
});
</script>

<style lang="less" scoped>
.order {
  min-height: 100vh;
  background: #f6f8f7;
  .search {
    border-bottom: 1px solid #f4f4f4;
  }
  .status-tabs {
    :deep(.van-tabs__nav) {
      .van-tab {
        color: #999;
        &.van-tab--active {
          color: #000;
        }
        &:not(:first-child)::before {
          content: " ";
          display: inline-block;
          width: 1px;
          height: 12px;
          background: #999;
          position: absolute;
          left: 0;
        }
      }
    }
  }
  .order-list {
    padding: 10px;
  }
}
</style>
